<template>
  <div class="main app-container">
    <div class="main-container" ref="shipRef">
      <!--顶部查询表单-->
      <div class="searchBox">
        <div>
          <el-form label-position="right" :inline="true" ref="searchForm" size="mini" v-model="queryParam">
            <el-row v-for="(queryType, index) in queryTypeList" :key="index">
              <el-form-item label="条件一：">
                <el-select v-model="queryType.one" style="width: 150px" value-key="code" clearable filterable @change="queryTypeOneChange">
                  <el-option v-for="(item, index) in queryParamTypeOne" :key="index" :label="item.name" :value="item"></el-option>
                </el-select>
                ：
                <el-input
                  v-if="!queryType.one.isDropDown"
                  clearable
                  v-model="queryParam[queryType.one.code]"
                  style="width: 250px"
                  placeholder="请输入"
                  :disabled="!queryType.one.code"
                ></el-input>
                <el-select
                  v-if="queryType.one.isDropDown"
                  v-model="queryParam[queryType.one.code]"
                  style="width: 250px"
                  clearable
                  filterable
                  multiple
                  :disabled="!queryType.one.code"
                >
                  <el-option v-for="(item, index) in queryType.one.list || []" :key="index" :label="item.name" :value="item.code">
                    <div v-if="queryType.one.code === 'brand'">
                      <span style="float: left; color: #8492a6; font-size: 13px">{{ item.name }}</span>
                      <span style="float: right">{{ item.brandDptName }}</span>
                    </div>
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="margin: 0 10px">
                <el-button @click="addQueryCondition" icon="el-icon-circle-plus-outline" circle type="info"></el-button>
                <el-button @click="removeQueryCondition(index)" icon="el-icon-remove-outline" circle type="info"></el-button>
              </el-form-item>
              <el-form-item label="条件二：">
                <el-select v-model="queryType.two" style="width: 150px" value-key="startCode" clearable filterable @change="queryTypeTwoChange">
                  <el-option v-for="(item, index) in queryParamTypeTwo" :key="index" :label="item.name" :value="item"></el-option>
                </el-select>
                ：
                <el-date-picker
                  clearable
                  placeholder="选择开始时间"
                  style="width: 250px"
                  type="date"
                  format="yyyy年MM月dd日"
                  value-format="yyyy-MM-dd"
                  v-model="queryParam[queryType.two.startCode]"
                  :disabled="!queryType.two.name"
                ></el-date-picker>
                -
                <el-date-picker
                  clearable
                  placeholder="选择结束时间"
                  style="width: 250px"
                  type="date"
                  format="yyyy年MM月dd日"
                  value-format="yyyy-MM-dd"
                  v-model="queryParam[queryType.two.endCode]"
                  :disabled="!queryType.two.name"
                ></el-date-picker>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
        <div>
          <el-button @click="searchList" size="mini" type="primary">查询</el-button>
          <el-button @click="clearQueryParam" size="mini" type="danger">清除</el-button>
        </div>
      </div>
      <div style="margin-top: 10px; margin-bottom: 10px">
        <buttonName @clickEvent="clickEvent" :dynamicBtnNames="dynamicBtnNames"></buttonName>
      </div>
      <div>
        <el-form label-position="right" :inline="true" size="mini" v-model="huData">
          <el-form-item label="承接总吨数(吨)：">
            <el-input disabled maxlength="32" placeholder="" v-model="huData.transportTotal" size="mini" style="width: 100px"></el-input>
          </el-form-item>
          <el-form-item label="发运总吨数(吨)：">
            <el-input disabled maxlength="32" placeholder="" v-model="huData.shipmentTotal" size="mini" style="width: 100px"></el-input>
          </el-form-item>
          <el-form-item label="未发运总吨数(吨)：">
            <el-input disabled maxlength="32" placeholder="" v-model="huData.noShipmentTotal" size="mini" style="width: 100px"></el-input>
          </el-form-item>
          <el-form-item label="已到港吨数(吨)：">
            <el-input disabled maxlength="32" placeholder="" v-model="huData.arrivalTotal" size="mini" style="width: 100px"></el-input>
          </el-form-item>
          <el-form-item label="未到港吨数(吨)：">
            <el-input disabled maxlength="32" placeholder="" v-model="huData.arrivalNotTotal" size="mini" style="width: 100px"></el-input>
          </el-form-item>
          <el-form-item label="已放货吨数(吨)：">
            <el-input disabled maxlength="32" placeholder="" v-model="huData.releaseGoodsTotal" size="mini" style="width: 100px"></el-input>
          </el-form-item>
          <el-form-item label="未放货吨数(吨)：">
            <el-input disabled maxlength="32" placeholder="" v-model="huData.releaseNotGoodsTotal" size="mini" style="width: 100px"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div>
        <el-form :model="shipData" size="mini">
          <el-table
            ref="multipleTable"
            :data="shipData"
            :header-cell-style="{ textAlign: 'center' }"
            :height="tableHeight"
            border
            id="ship-table"
            @row-click="rowClick"
            @selection-change="handleSelectionChange"
            :row-style="rowStyle"
          >
            <drag-table-header :data="$data" :table-header="tableHeaders"></drag-table-header>
          </el-table>
          <div class="block">
            <el-pagination
              :current-page="Pagination.currentPage"
              :layout="Pagination.layout"
              :page-size="Pagination.PageSize"
              :page-sizes="Pagination.pageSizeList"
              :total="Pagination.total"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              background
              ref="pagination"
              small
            ></el-pagination>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import paginationMixin from '@/mixins/pagination'
import isAuth from '@/mixins/buttonAuth'
import resizeMixin from '@/mixins/resize'
import buttonName from '@/components/buttonName/button-name'
import { GYSClientList, queryShippingStatus, shippingExportExcel, shippingLetterExportExcel, sugarType } from '@/request/api'
import scrollChange from '@/utils/onscroll'
import { goodsBrandListA, saveShipEditData } from '@/request/queryCensusP/shippingStatus'
import store from '@/store'
import dragTableHeader from '@/components/dragTableHeader'
import { dateFormat } from '@/utils/utils'

export default {
  mixins: [isAuth, paginationMixin, resizeMixin],
  name: 'shippingStatus',
  data() {
    const role = (localStorage.getItem('IS_SHOW1') || '').toString()
    return {
      tableHeaders: [
        {
          label: '序号',
          type: 'index',
          width: 55,
          fixed: 'left',
        },
        {
          type: 'selection',
          width: 55,
          fixed: 'left',
        },
        {
          label: '合约号',
          prop: 'cddTakeNo',
          width: 200,
        },
        {
          label: '类别',
          prop: 'cddType',
          width: 100,
        },
        {
          label: '委托书编号(供)',
          prop: 'contractNo',
          width: 200,
          if: this.currentRole !== '4',
        },
        {
          label: '承接时间',
          prop: 'signingTime',
          width: 200,
        },
        {
          label: '吨数',
          prop: 'transport',
          width: 200,
        },
        {
          label: `${role === '5' ? '客户' : '供应商'}名称`,
          prop: role === '5' ? 'clientName' : 'companyName',
          width: 120,
          if: role !== '3' && role !== '6',
        },
        {
          label: `${role === '5' ? '客户' : '供应商'}单价`,
          prop: 'clientPrice',
          width: 100,
          if: role !== '3' && role !== '6',
        },
        {
          label: `${role === '5' ? '客户' : '供应商'}总金额`,
          prop: 'clientAmount',
          width: 150,
          if: role !== '3' && role !== '6',
        },
        {
          label: '供应商名称',
          prop: 'supplierName',
          width: 200,
          if: role === '5',
        },
        {
          label: '供应商单价',
          prop: 'supplierPrice',
          width: 100,
          if: role === '5',
        },
        {
          label: '供应商总金额',
          prop: 'supplierAmount',
          width: 150,
          if: role === '5',
        },
        {
          label: '装货地',
          prop: 'wabPlaceof',
          width: 200,
        },
        {
          label: '收货人',
          prop: 'shippingCompany',
          width: 400,
        },
        {
          label: '到货地',
          prop: 'wabReceplace',
          width: 200,
        },
        {
          label: '品牌',
          prop: 'brand',
          width: 100,
        },
        {
          label: '级别/榨季/升贴水',
          prop: 'cddGrade',
          width: 200,
        },
        {
          label: '装货时间',
          prop: 'wabShiptime',
          width: 200,
          component: {
            props: ['row', 'data'],
            template: `
              <el-form-item :prop="'data.shipData.' + row.$index + '.wabShiptime'" v-if="data.shipData[row.$index].wabId">
                <el-date-picker
                  @change="$root.$emit('columnEdit',row.$index)"
                  type="date"
                  format="yyyy年MM月dd日"
                  value-format="yyyy-MM-dd"
                  v-model="data.shipData[row.$index].wabShiptime"
                  :disabled="!data.editStatus"
                  @paste.native.stop="$root.$emit('excelPaste',row,$event)"
                  clearable
                ></el-date-picker>
              </el-form-item>
            `,
          },
        },
        {
          label: '运单',
          prop: 'wabCode',
          width: 200,
          component: {
            props: ['row', 'data'],
            template: `
              <el-form-item :prop="'data.shipData.' + row.$index + '.wabCode'" v-if="row.row.wabId && row.row.tranType === 'DS'">
                <el-input
                  clearable
                  v-model="data.shipData[row.$index].wabCode"
                  :disabled="!data.editStatus"
                  @change="$root.$emit('columnEdit',row.$index)"
                  @paste.native.stop="$root.$emit('excelPaste',row,$event)"
                ></el-input>
              </el-form-item>
            `,
          },
        },
        {
          label: '箱号',
          prop: 'ctrNo',
          width: 200,
          component: {
            props: ['row', 'data'],
            template: `
              <el-form-item :prop="'data.shipData.' + row.$index + '.wabCode'" v-if="data.shipData[row.$index].wabId">
                <el-input
                  clearable
                  v-model="data.shipData[row.$index].ctrNo"
                  :disabled="!data.editStatus"
                  @change="$root.$emit('columnEdit',row.$index)"
                  @paste.native.stop="$root.$emit('excelPaste',row,$event)"
                ></el-input>
              </el-form-item>
            `,
          },
        },
        {
          label: '铅封号',
          prop: 'sealNo',
          width: 200,
          component: {
            props: ['row', 'data'],
            template: `
              <el-form-item :prop="'data.shipData.' + row.$index + '.sealNo'" v-if="data.shipData[row.$index].wabId">
                <el-input
                  clearable
                  v-model="data.shipData[row.$index].sealNo"
                  :disabled="!data.editStatus"
                  @change="$root.$emit('columnEdit',row.$index)"
                  @paste.native.stop="$root.$emit('excelPaste',row,$event)"
                ></el-input>
              </el-form-item>
            `,
          },
        },
        {
          label: '吨数',
          prop: 'wabWeight',
          width: 200,
        },
        {
          label: '生产批次',
          prop: 'wabProBatch',
          width: 200,
          component: {
            props: ['row', 'data'],
            template: `
              <el-form-item :prop="'data.shipData.' + row.$index + '.wabProBatch'" v-if="data.shipData[row.$index].wabId">
                <el-input
                  clearable
                  v-model="data.shipData[row.$index].wabProBatch"
                  :disabled="!data.editStatus"
                  @change="$root.$emit('columnEdit',row.$index)"
                  @paste.native.stop="$root.$emit('excelPaste',row,$event)"
                ></el-input>
              </el-form-item>
            `,
          },
        },
        {
          label: '一程船航名航次',
          prop: 'oneBoat',
          width: 200,
          component: {
            props: ['row', 'data'],
            template: `
              <el-form-item :prop="'data.shipData.' + row.$index + '.oneBoat'" v-if="data.shipData[row.$index].wabId">
                <el-input
                  clearable
                  v-model="data.shipData[row.$index].oneBoat"
                  :disabled="!data.editStatus"
                  @change="$root.$emit('columnEdit',row.$index)"
                  @paste.native.stop="$root.$emit('excelPaste',row,$event)"
                ></el-input>
              </el-form-item>
            `,
          },
        },
        {
          label: '开船时间',
          prop: 'oneBoatTime',
          width: 200,
          component: {
            props: ['row', 'data'],
            template: `
              <el-form-item :prop="'data.shipData.' + row.$index + '.oneBoatTime'" v-if="data.shipData[row.$index].wabId">
                <div class="blaok">
                  <el-date-picker
                  @change="$root.$emit('columnEdit',row.$index)"
                  type="date"
                  format="yyyy年MM月dd日"
                  value-format="yyyy-MM-dd"
                  v-model="data.shipData[row.$index].oneBoatTime"
                  :disabled="!data.editStatus"
                  clearable
                  @paste.native.stop="$root.$emit('excelPaste',row,$event)"
                ></el-date-picker>
                </div>
              </el-form-item>
            `,
          },
        },
        {
          label: '中转港',
          prop: 'oneTransit',
          width: 200,
          component: {
            props: ['row', 'data'],
            template: `
              <el-form-item :prop="'data.shipData.' + row.$index + '.oneTransit'" v-if="data.shipData[row.$index].wabId">
                <el-input
                  clearable
                  v-model="data.shipData[row.$index].oneTransit"
                  :disabled="!data.editStatus"
                  @change="$root.$emit('columnEdit',row.$index)"
                  @paste.native.stop="$root.$emit('excelPaste',row,$event)"
                ></el-input>
              </el-form-item>
            `,
          },
        },
        {
          label: '二程船船名航次',
          prop: 'twoBoat',
          width: 200,
          component: {
            props: ['row', 'data'],
            template: `
              <el-form-item :prop="'data.shipData.' + row.$index + '.twoBoat'" v-if="data.shipData[row.$index].wabId">
                <el-input
                  clearable
                  v-model="data.shipData[row.$index].twoBoat"
                  :disabled="!data.editStatus"
                  @change="$root.$emit('columnEdit',row.$index)"
                  @paste.native.stop="$root.$emit('excelPaste',row,$event)"
                ></el-input>
              </el-form-item>
            `,
          },
        },
        {
          label: '开船时间',
          prop: 'twoBoatTime',
          width: 200,
          component: {
            props: ['row', 'data'],
            template: `
              <el-form-item :prop="'data.shipData.' + row.$index + '.twoBoatTime'" v-if="data.shipData[row.$index].wabId">
                <el-date-picker
                  @change="$root.$emit('columnEdit',row.$index)"
                  type="date"
                  format="yyyy年MM月dd日"
                  value-format="yyyy-MM-dd"
                  v-model="data.shipData[row.$index].twoBoatTime"
                  :disabled="!data.editStatus"
                  clearable
                  @paste.native.stop="$root.$emit('excelPaste',row,$event)"
                ></el-date-picker>
              </el-form-item>
            `,
          },
        },
        {
          label: '中转港',
          prop: 'twoTransit',
          width: 200,
          component: {
            props: ['row', 'data'],
            template: `
              <el-form-item :prop="'data.shipData.' + row.$index + '.twoTransit'" v-if="data.shipData[row.$index].wabId">
                <el-input
                  clearable
                  v-model="data.shipData[row.$index].twoTransit"
                  :disabled="!data.editStatus"
                  @change="$root.$emit('columnEdit',row.$index)"
                  @paste.native.stop="$root.$emit('excelPaste',row,$event)"
                ></el-input>
              </el-form-item>
            `,
          },
        },
        {
          label: '三程船船名航次',
          prop: 'threeBoat',
          width: 200,
          component: {
            props: ['row', 'data'],
            template: `
              <el-form-item :prop="'data.shipData.' + row.$index + '.threeBoat'" v-if="data.shipData[row.$index].wabId">
                <el-input
                  clearable
                  v-model="data.shipData[row.$index].threeBoat"
                  :disabled="!data.editStatus"
                  @change="$root.$emit('columnEdit',row.$index)"
                  @paste.native.stop="$root.$emit('excelPaste',row,$event)"
                ></el-input>
              </el-form-item>
            `,
          },
        },
        {
          label: '预计到港时间',
          prop: 'threeBoatTime',
          width: 200,
          component: {
            props: ['row', 'data'],
            template: `
              <el-form-item :prop="'data.shipData.' + row.$index + '.threeBoatTime'" v-if="data.shipData[row.$index].wabId">
                <el-date-picker
                  @change="$root.$emit('columnEdit',row.$index)"
                  type="date"
                  format="yyyy年MM月dd日"
                  value-format="yyyy-MM-dd"
                  v-model="data.shipData[row.$index].threeBoatTime"
                  :disabled="!data.editStatus"
                  clearable
                  @paste.native.stop="$root.$emit('excelPaste',row,$event)"
                ></el-date-picker>
              </el-form-item>
            `,
          },
        },
        {
          label: '实际到港时间',
          prop: 'threeBoatATA',
          width: 200,
          component: {
            props: ['row', 'data'],
            template: `
              <el-form-item :prop="'data.shipData.' + row.$index + '.threeBoatATA'" v-if="data.shipData[row.$index].wabId">
                <el-date-picker
                  @change="$root.$emit('columnEdit',row.$index)"
                  type="date"
                  format="yyyy年MM月dd日"
                  value-format="yyyy-MM-dd"
                  v-model="data.shipData[row.$index].threeBoatATA"
                  :disabled="!data.editStatus"
                  clearable
                  @paste.native.stop="$root.$emit('excelPaste',row,$event)"
                ></el-date-picker>
              </el-form-item>
            `,
          },
        },
        {
          label: '签收数量',
          prop: 'wabSignNum',
          width: 200,
          component: {
            props: ['row', 'data', 'self'],
            template: `
              <el-form-item :prop="'data.shipData.' + row.$index + '.wabSignNum'" v-if="data.shipData[row.$index].wabId">
                <el-input
                  clearable
                  v-model="data.shipData[row.$index].wabSignNum"
                  :disabled="!data.editStatus"
                  @change="$root.$emit('columnEdit',row.$index)"
                  @paste.native.stop="$root.$emit('excelPaste',row,$event)"
                ></el-input>
              </el-form-item>
            `,
          },
        },
        {
          label: '完成时间',
          prop: 'wabCompleteTime',
          width: 200,
          component: {
            props: ['row', 'data'],
            template: `
              <el-form-item :prop="'data.shipData.' + row.$index + '.wabCompleteTime'" v-if="data.shipData[row.$index].wabId">
                <el-date-picker
                  @change="$root.$emit('columnEdit',row.$index)"
                  type="date"
                  format="yyyy年MM月dd日"
                  value-format="yyyy-MM-dd"
                  v-model="data.shipData[row.$index].wabCompleteTime"
                  :disabled="!data.editStatus"
                  clearable
                  @paste.native.stop="$root.$emit('excelPaste',row,$event)"
                ></el-date-picker>
              </el-form-item>
            `,
          },
        },
      ],
      queryTypeList: [
        {
          one: {
            name: '',
            brandDptName: '',
            code: '',
            isDropDown: false,
            list: [],
          },
          two: {
            name: '',
            startCode: '',
            endCode: '',
          },
        },
      ],
      editStatus: false,
      editMdlName: undefined,
      dynamicBtnNames: undefined,
      currentRole: (localStorage.getItem('IS_SHOW1') || '').toString(), // 当前角色
      shippingStatusVO: [], //存值
      supplierName: '', //供应商名称
      ids: '', //id集合
      tableHeight: 200,
      clientList: [],
      supplierList: [],
      brandList: [],
      shipData: [], // 表的数据
      shipDataAdd: [], // 新增的数据
      currentData: {}, // 当前行
      huData: {
        transportTotal: 0,
        shipmentTotal: 0,
        noShipmentTotal: 0,
        arrivalTotal: 0,
        arrivalNotTotal: 0,
        releaseGoodsTotal: 0,
        releaseNotGoodsTotal: 0,
      },
      // 查询项目下拉 第一组
      queryParamTypeOne: [
        {
          name: '委托书编号',
          code: 'contractNo',
        },
        {
          name: '运单编号',
          code: 'wayNo',
        },
        {
          name: '装货地',
          code: 'wabPlaceof',
        },
        {
          name: '车队',
          code: 'shippingCompany',
        },
        {
          name: '到货地',
          code: 'wabReceplace',
        },
        {
          name: '箱号',
          code: 'ctrNo',
        },
        {
          name: '客户',
          code: 'clients',
          isDropDown: true,
          list: [],
        },
        {
          name: '供应商',
          code: 'suppliers',
          isDropDown: true,
          list: [],
        },
        {
          name: '品牌',
          code: 'brands',
          isDropDown: true,
          list: [],
        },
      ],
      // 查询项目下拉 第二组
      queryParamTypeTwo: [
        {
          name: '装货时间',
          startCode: 'loadStartTime',
          endCode: 'loadEndTime',
        },
        {
          name: '承接时间',
          startCode: 'signingStartTime',
          endCode: 'signingEndTime',
        },
        {
          name: '到港时间',
          startCode: 'oneBoatATAStart',
          endCode: 'oneBoatATAEnd',
        },
        {
          name: '完成时间',
          startCode: 'wabCompleteTimeStart',
          endCode: 'wabCompleteTimeEnd',
        },
      ],
      currentQueryTypeOne: {
        name: '',
        brandDptName: '',
        code: '',
        isDropDown: false,
        list: [],
      },
      currentQueryTypeTwo: {
        name: '',
        startCode: '',
        endCode: '',
      },
      queryParam: {
        // 查询条件
        contractNo: '', // 委托书编号
        wabPlaceof: '', // 装货地址
        shippingCompany: '', //车队
        wabReceplace: '', // 卸货地址
        ctrNo: '', // 箱号
        client: '', // 客户名称
        clients: [],
        supplier: '', // 供应商名称
        suppliers: [],
        brand: '', // 品牌
        brands: [],
        loadStartTime: undefined, // 开始时间
        loadEndTime: undefined, // 结束时间
        signingStartTime: undefined, // 承接时间 开始时间
        signingEndTime: undefined, // 承接时间 结束时间
        oneBoatATAStart: undefined, // 到港时间 开始时间
        oneBoatATAEnd: undefined, // 到港时间 结束时间
        oneBoatDOFStart: undefined, // 放货时间 开始时间
        oneBoatDOFEnd: undefined, // 放货时间 结束时间
        wabCompleteTimeStart: undefined, // 完成时间 开始
        wabCompleteTimeEnd: undefined, // 完成时间结束
        wayNo: '', // 运单编号
        upperClient: undefined, // 集团id
      },
      mergeContractNo: undefined, // 需要合并合同号,需要合并几格
      mergeContractNoed: undefined, // 已经合并的列
    }
  },
  created() {
    this.resize = () => {
      this.tableHeight = this.$refs.shipRef.offsetHeight - 225
    }
  },
  components: {
    buttonName,
    dragTableHeader,
  },
  mounted() {
    scrollChange(document.querySelector('#ship-table .el-table__body-wrapper'))
    this.initData()
    this.initClientList()
    this.initBrandList()
    this.initSupplierList()
    const map = new Map()
    this.$store.getters['user/GET_NAV_BUTTON'].moduleChildrenGrand.forEach(item => {
      map.set(item.mdlCode, item.mdlName)
    })
    this.dynamicBtnNames = map
    this.$root.$on('columnEdit', index => this.columnEdit(index))
    this.$root.$on('excelPaste', (index, event) => this.excelPaste(index, event))
  },
  beforeDestroy() {
    this.$root.$off('columnEdit')
    this.$root.$off('excelPaste')
  },
  methods: {
    searchList() {
      this.Pagination.currentPage = 1
      this.getList()
    },
    rowStyle({ row }) {
      if (this.shippingStatusVO.includes(row)) {
        return {
          background: '#5786ee',
        }
      }
      //无船:白色
      if (row.oneBoat == null) {
        return {}
      } else {
        //有船
        //无开始时间
        if (row.oneBoatTime == null) {
          return { background: '#81F781' }
        } else {
          //有开始时间
          //有实际到港时间
          if (row.oneBoatATA == null) {
            return { background: '#D99795' }
          } else {
            //无实际到港时间
            //无放箱时间
            if (row.oneBoatDOF == null) {
              return { background: '#A9F5A9' }
            } else {
              //有放箱时间
              return { background: '#04B404' }
            }
          }
        }
      }
    },
    initData() {
      const queryParam = Object.assign(
        {
          index: this.Pagination.currentPage,
          size: this.Pagination.pageSize,
          source: 1,
        },
        this.queryParam
      )
      // 糖厂
      if (['3', '6'].includes(this.currentRole)) {
        queryParam.client = store.state.user.DPTID_DX_H
      }
      // 集团
      if (this.currentRole === '2') {
        queryParam.upperClient = store.state.user.DPTID_DX_H
      }
      // 平台不加限制
      queryShippingStatus(queryParam).then(res => {
        this.shipData = res.data.data
        this.huData = res.data
        this.updatePaginationTotal(res.total)
        this.editStatus = false
        const mergeMap = new Map()
        res.data.data.forEach(item => {
          if (mergeMap.has(item.contractNo)) {
            mergeMap.set(item.contractNo, mergeMap.get(item.contractNo) + 1)
          } else {
            mergeMap.set(item.contractNo, 1)
          }
        })
        this.mergeContractNo = new Map()
        mergeMap.forEach((v, k) => {
          if (v > 1) {
            this.mergeContractNo.set(k, v)
          }
        })
        this.mergeContractNoed = new Map()
        const map = new Map()
        this.$store.getters['user/GET_NAV_BUTTON'].moduleChildrenGrand.forEach(item => {
          map.set(item.mdlCode, item.mdlName)
        })
        this.dynamicBtnNames = map
      })
    },
    initClientList() {
      const data = {}
      if (this.currentRole === '6') {
        data.dptId = store.state.user.DPTID_DX_H
      }
      // 集团
      if (this.currentRole === '2') {
        data.dptPredptId = store.state.user.DPTID_DX_H
      }
      sugarType(data).then(res => {
        this.clientList = res.data
        for (let val of this.queryParamTypeOne) {
          if ('clients' === val.code) {
            for (let item of this.clientList) {
              val.list.push({
                name: item.dptName,
                code: item.dptId,
              })
            }
            break
          }
        }
      })
    },
    initBrandList() {
      goodsBrandListA({}).then(res => {
        this.brandList = res.data
        for (let val of this.queryParamTypeOne) {
          if ('brands' === val.code) {
            for (let item of this.brandList) {
              val.list.push({
                name: item.brandName,
                brandDptName: item.dptName,
                code: item.brandCode,
              })
            }
            break
          }
        }
      })
    },
    initSupplierList() {
      GYSClientList({}).then(res => {
        this.supplierList = res.data
        for (let val of this.queryParamTypeOne) {
          if ('suppliers' === val.code) {
            for (let item of this.supplierList) {
              val.list.push({
                name: item.fltName,
                code: item.uuid,
              })
            }
            break
          }
        }
      })
    },
    getList() {
      this.initData()
    },
    exportEx() {
      shippingExportExcel(
        Object.assign(
          {
            source: 1,
            wabIds: this.shippingStatusVO.filter(item => item.wabId).map(item => item.wabId),
            nos: this.shippingStatusVO.filter(item => !item.wabId).map(item => item.contractNo),
            roleType: this.currentRole === '5' ? 'pt' : 'kh',
          },
          this.queryParam
        )
      ).then(res => {
        const fileName = decodeURI(res.headers['filename'])
        const reader = new FileReader()
        reader.readAsDataURL(new Blob([res.data]))
        reader.onload = e => {
          let a = document.createElement('a')
          a.download = fileName
          a.href = e.target.result
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        }
        window.parent._$store.dispatch('app/loading_status', false)
      })
    },
    clickEvent(val) {
      switch (val.mdlCode) {
        case 'export':
          this.exportEx()
          break
        case 'shippingLetterExport':
          this.shippingLetterExport()
          break
        case 'update':
          // 打开编辑选项
          this.doUpdate(val.mdlCode)
          break
        case 'save':
          this.doSave()
          break
      }
    },
    handleSelectionChange(val) {
      //值传递
      this.shippingStatusVO = val
      if (val.length) {
        this.supplierName = this.shippingStatusVO[0].supplierName
      }
      // for (let i = 0; i < this.shippingStatusVO.length; i++) {
      //   this.supplierName = this.shippingStatusVO[i].supplierName
      // }
    },
    shippingLetterExport() {
      if (this.shippingStatusVO.length > 0) {
        //判断是否为同一供应商
        for (let i = 0; i < this.shippingStatusVO.length; i++) {
          if (!this.shippingStatusVO[i].wabCode) {
            this.$message.error('请选择可以导出的数据')
            return
          }
          if (this.supplierName !== this.shippingStatusVO[i].supplierName) {
            this.$message.error('请选择同一供应商数据')
            return
          }
        }
        shippingLetterExportExcel(
          this.shippingStatusVO.map(value => value.id),
          this.supplierName
        ).then(res => {
          const fileName = decodeURI(res.headers['filename'])
          const reader = new FileReader()
          reader.readAsDataURL(new Blob([res.data]))
          reader.onload = e => {
            let a = document.createElement('a')
            a.download = fileName
            a.href = e.target.result
            document.body.appendChild(a)
            a.click()
            document.body.removeChild(a)
          }
          window.parent._$store.dispatch('app/loading_status', false)
        })
      } else {
        if (Object.keys(this.shippingStatusVO).length === 0) {
          this.$message.error('请选择一条数据')
          return
        }
      }
      //清除复选框
      this.$refs.multipleTable.clearSelection()
    },
    doUpdate(mdlCode) {
      if (!this.editStatus) {
        this.editMdlName = this.dynamicBtnNames.get(mdlCode)
        const map = new Map()
        this.dynamicBtnNames.forEach((v, k) => {
          if (k === mdlCode) {
            map.set(k, `取消${this.editMdlName}`)
          } else {
            map.set(k, v)
          }
        })
        this.dynamicBtnNames = map
      } else {
        const map = new Map()
        this.$store.getters['user/GET_NAV_BUTTON'].moduleChildrenGrand.forEach(item => {
          map.set(item.mdlCode, item.mdlName)
        })
        this.dynamicBtnNames = map
      }
      this.editStatus = !this.editStatus
      if (!this.editStatus) {
        this.getList()
      }
    },
    doSave() {
      saveShipEditData(
        this.shipData
          .filter(value => value.columnEditd)
          .map(value => ({
            wayNo: value.wabCode,
            contractNo: value.contractNo,
            wabShiptime: !value.wabShiptime
              ? value.wabShiptime
              : typeof value.wabShiptime === 'string'
                ? value.wabShiptime
                : dateFormat('YYYY-mm-dd', value.wabShiptime),
            ctrNo: value.ctrNo,
            sealNo: value.sealNo,
            wabWeight: value.wabWeight,
            wabProBatch: value.wabProBatch,
            oneBoatTime: !value.oneBoatTime
              ? value.oneBoatTime
              : typeof value.oneBoatTime === 'string'
                ? value.oneBoatTime
                : dateFormat('YYYY-mm-dd', value.oneBoatTime),
            oneBoat: value.oneBoat,
            oneBoatATA: value.oneBoatATA,
            oneTransit: value.oneTransit,
            twoBoat: value.twoBoat,
            twoBoatTime: !value.twoBoatTime
              ? value.twoBoatTime
              : typeof value.twoBoatTime === 'string'
                ? value.twoBoatTime
                : dateFormat('YYYY-mm-dd', value.twoBoatTime),
            twoBoatATA: value.twoBoatATA,
            twoTransit: value.twoTransit,
            threeBoat: value.threeBoat,
            threeBoatTime: !value.threeBoatTime
              ? value.threeBoatTime
              : typeof value.threeBoatTime === 'string'
                ? value.threeBoatTime
                : dateFormat('YYYY-mm-dd', value.threeBoatTime),
            threeBoatATA: !value.threeBoatATA
              ? value.threeBoatATA
              : typeof value.threeBoatATA === 'string'
                ? value.threeBoatATA
                : dateFormat('YYYY-mm-dd', value.threeBoatATA),
            oneBoatSignNum: value.oneBoatSignNum,
            wabSignNum: value.wabSignNum,
            cmtId: value.cmtId,
            cmtNo: value.cmtNo,
            oneId: value.oneId,
            twoId: value.twoId,
            threeId: value.threeId,
            wabId: value.wabId,
            wabCompleteTime: !value.wabCompleteTime
              ? value.wabCompleteTime
              : typeof value.wabCompleteTime === 'string'
                ? value.wabCompleteTime
                : dateFormat('YYYY-mm-dd', value.wabCompleteTime),
          }))
      ).then(() => {
        this.$message.success({
          showClose: true,
          message: '保存成功`',
        })
        this.getList()
      })
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0 && columnIndex === 0) {
        this.mergeContractNoed.clear()
      }
      // 合并前五项
      if (columnIndex > 1 && columnIndex <= 5 && this.mergeContractNo && this.mergeContractNo.has(row.contractNo)) {
        // 第一个
        if (!this.mergeContractNoed.has(row.contractNo)) {
          this.mergeContractNoed.set(row.contractNo, new Set().add(columnIndex))
          return {
            rowspan: this.mergeContractNo.get(row.contractNo),
            colspan: 1,
          }
        } else if (!this.mergeContractNoed.get(row.contractNo).has(columnIndex)) {
          // 当前列第一个
          this.mergeContractNoed.get(row.contractNo).add(columnIndex)
          return {
            rowspan: this.mergeContractNo.get(row.contractNo),
            colspan: 1,
          }
        } else {
          // 非第一个 隐藏
          return {
            rowspan: 0,
            colspan: 0,
          }
        }
      }
    },
    columnEdit(index) {
      if (this.shipData[index].wabCode) {
        this.shipData[index].columnEditd = true
      }
    },
    rowClick(value) {
      this.$refs['multipleTable'].toggleRowSelection(value)
    },
    queryTypeOneChange() {
      const codes = this.queryTypeList.map(item => item.one.code)
      for (let key of Object.keys(this.queryParam)) {
        if (!codes.includes(key) && key.toLowerCase().indexOf('start') === -1 && key.toLowerCase().indexOf('end') === -1) {
          this.queryParam[key] = null
        }
      }
      // this.queryParam.contractNo = '' // 委托书编号
      // this.queryParam.wabPlaceof = '' // 装货地址
      // this.queryParam.shippingCompany = '' //车队
      // this.queryParam.wabReceplace = '' // 卸货地址
      // this.queryParam.ctrNo = '' // 箱号
      // this.queryParam.client = '' // 客户名称
      // this.queryParam.supplier = '' // 供应商名称
      // this.queryParam.brand = '' // 品牌
      // this.queryParam.wayNo = '' // 运单
    },
    queryTypeTwoChange() {
      const startCodes = this.queryTypeList.map(item => item.two.startCode)
      const endCodes = this.queryTypeList.map(item => item.two.endCode)
      for (let key of Object.keys(this.queryParam)) {
        if (!startCodes.includes(key) && !endCodes.includes(key) && (key.toLowerCase().indexOf('start') !== -1 || key.toLowerCase().indexOf('end') !== -1)) {
          this.queryParam[key] = null
        }
      }
      // this.queryParam.loadStartTime = undefined // 开始时间
      // this.queryParam.loadEndTime = undefined // 结束时间
      // this.queryParam.signingStartTime = undefined // 承接时间 开始时间
      // this.queryParam.signingEndTime = undefined // 承接时间 结束时间
      // this.queryParam.oneBoatATAStart = undefined // 到港时间 开始时间
      // this.queryParam.oneBoatATAEnd = undefined // 到港时间 结束时间
      // this.queryParam.oneBoatDOFStart = undefined // 放货时间 开始时间
      // this.queryParam.oneBoatDOFEnd = undefined // 放货时间 结束时间
    },
    clearQueryParam() {
      this.queryTypeOneChange()
      this.queryTypeTwoChange()
      this.currentQueryTypeOne = {
        name: '',
        brandDptName: '',
        code: '',
        isDropDown: false,
        list: [],
      }
      this.currentQueryTypeTwo = {
        name: '',
        startCode: '',
        endCode: '',
      }
    },
    addQueryCondition() {
      this.queryTypeList.push({
        one: {
          name: '',
          brandDptName: '',
          code: '',
          isDropDown: false,
          list: [],
        },
        two: {
          name: '',
          startCode: '',
          endCode: '',
        },
      })
    },
    removeQueryCondition(index) {
      if (index !== 0) {
        this.queryTypeList.splice(index, 1)
      }
    },
    excelPaste(scope, e) {
      const codes = this.tableHeaders
        .filter(item => item.prop)
        .filter(item => item.component)
        .map(item => item.prop)
      const labels = this.tableHeaders
        .filter(item => item.prop)
        .filter(item => item.component)
        .map(item => item.label)
      let data = null
      let clipboardData = e.clipboardData // IE
      if (!clipboardData) {
        //chrome
        clipboardData = e.originalEvent.clipboardData
      }
      data = clipboardData.getData('Text')
      if (!data || !data.length) {
        return
      }
      let delimiter = '\n'
      if (data.indexOf('\r\n')) {
        delimiter = '\r\n'
      }
      // 2021年2月4日10:06:20 没有换行和分隔符 不覆盖默认的粘贴行为
      if (!data.toString().includes(delimiter) && !data.toString().includes('\t')) {
        return
      }
      const { column } = scope
      // 第一列index
      const initialColumnIndex = codes.indexOf(column.property)
      let currentColumnIndex = initialColumnIndex
      const dataRows = data.split(delimiter)
      // 2021年2月4日10:36:21 只有一个值，不做处理
      if (dataRows.length - 1 === 1 && !dataRows[0].includes('\t')) {
        // 2021年2月22日10:18:57 如果是日期 需要赋值
        if (labels[currentColumnIndex].includes('时间')) {
          const str = data.split('/')
          if (!data.includes('/') && str.length - 1 !== 2) {
            this.$message.error(`${data}日期格式错误,正确格式为 年/月/日`)
            return
          }
          const date = new Date()
          // 判断是否为数字
          for (let i = 0; i < str.length; i++) {
            str[i] = str[i].trim().replaceAll('\r\n', '').replaceAll('\n', '')
            console.log(str[i])
            if (!/^[0-9]*[1-9][0-9]*$/.test(str[i])) {
              this.$message.error(`${data}日期格式错误,正确格式为 年/月/日`)
              return
            }
          }
          date.setFullYear(str[0], str[1] - 1, str[2])
          date.setHours(0, 0, 0)
          this.shipData[scope.$index][codes[currentColumnIndex]] = date
        }
        return
      }
      // 第一行index
      let currentRowIndex = scope.$index
      let i = 0
      while (i < dataRows.length) {
        const tableData = this.shipData[currentRowIndex]
        // 当前行不能被编辑 跳过
        if (!tableData.wabCode || !dataRows || !dataRows.length) {
          currentRowIndex++
          continue
        }
        const dataRow = dataRows[i]
        const dataColumns = dataRow.split('\t')
        for (let j = 0; j < dataColumns.length; j++) {
          // 没有值跳过
          if (!dataColumns[j]) {
            currentColumnIndex++
            continue
          }
          // 2021年2月9日13:54:00 增加日期格式错误的提示
          if (labels[currentColumnIndex].includes('时间')) {
            const str = dataColumns[j].split('/')
            if (!dataColumns[j].includes('/') && str.length - 1 !== 2) {
              this.$message.error(`${dataColumns[j]}日期格式错误,正确格式为 年/月/日`)
              return
            }
            const date = new Date()
            // 判断是否为数字
            for (let item of str) {
              // 不匹配直接退出
              if (!/^[0-9]*[1-9][0-9]*$/.test(item)) {
                this.$message.error(`${dataColumns[j]}日期格式错误,正确格式为 年/月/日`)
                return
              }
            }
            date.setFullYear(str[0], str[1] - 1, str[2])
            date.setHours(0, 0, 0)
            tableData[codes[currentColumnIndex]] = date
          } else {
            tableData[codes[currentColumnIndex]] = dataColumns[j]
          }
          this.$set(this.shipData, currentRowIndex, tableData)
          currentColumnIndex++
        }
        currentRowIndex++
        // 超过数据列退出
        if (currentRowIndex > this.shipData.length - 1) {
          break
        }
        tableData.columnEditd = true
        currentColumnIndex = initialColumnIndex
        i++
      }
      // 特别处理一下第一个值
      setTimeout(() => {
        const row = this.shipData[scope.$index]
        if (column.label.includes('时间')) {
          const value = dataRows[0].split('\t')[0]
          if (!value.includes('/')) {
            return
          }
          const str = value.split('/')
          const date = new Date()
          date.setFullYear(str[0], str[1] - 1, str[2])
          date.setHours(0, 0, 0)
          row[column.property] = value
        } else {
          row[column.property] = dataRows[0].split('\t')[0]
        }
        this.$set(this.shipData, scope.$index, row)
      }, 500)
    },
  },
}
</script>

<style lang="scss" scoped>
.main {
  .main-container {
    width: 100%;
    height: 100%;
    .searchBox {
      display: flex;
    }
  }
}
</style>
